import React from 'react'
import { connect } from 'react-redux'
import { messages } from "share/common"
import { Form, Card, Input, Button, Radio, Icon, message } from 'antd'
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const TextArea = Input.TextArea;
import LanguageInput from 'components/template/language-input/language-input'
import workflowService from 'containers/setting/workflow/workflow.service'
import workflowUtil from 'containers/setting/new-workflow/utils'

class NodeApproveAi extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      approvalAction: props.basicInfo.approvalActions,
      nodeNameObj: {
        i18n: null,
        remark: null
      },
    }
  }

  //保存基础信息
  handleSaveBasicInfo = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const { basicInfo } = this.props;
        let params = values;
        params.code = basicInfo.code;
        params.countersignRule = basicInfo.countersignRule;
        params.name = basicInfo.name;
        params.nullableRule = basicInfo.nullableRule;
        params.repeatRule = basicInfo.repeatRule;
        params.ruleApprovalNodeOID = basicInfo.ruleApprovalNodeOID;
        params.status = basicInfo.status;
        params.type = basicInfo.type;
        if (this.state.nodeNameObj.i18n) {
          params.i18n = {};
          params.i18n['remark'] = this.state.nodeNameObj.i18n;
        }else{
          params.i18n = basicInfo.i18n;
        }
        this.setState({ loading: true });
        workflowService.modifyApprovalNodes(params).then(() => {
          this.setState({ loading: false });
          this.props.basicInfoSaveHandle();
          message.success(messages('common.save.success', {name: ''}))
        }).catch(() => {
          this.setState({ loading: false })
        })
      }
    })
  };

  handleRemarkChange = (value,i18n) => {
    let { nodeNameObj } = this.state;
    nodeNameObj.remark = value;
    nodeNameObj.i18n = i18n;
    this.setState({ nodeNameObj });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const { basicInfo ,chosenNodeType} = this.props;
    const { loading, approvalAction, nodeNameObj } = this.state;
    const formItemLayout = {
      labelCol: {span: 3},
      wrapperCol: {span: 21},
    };
    return (
      <div className='node-approve-ai'>
        <Card className="basic-info-container">
          <h3 className="title">{messages('setting.key1371'/*基础信息*/)}</h3>
          <Form onSubmit={this.handleSaveBasicInfo}>
            <FormItem {...formItemLayout} label={messages('setting.key1372'/*节点名称*/)} colon={false}>
              {getFieldDecorator('remark', {
                initialValue: basicInfo.remark
              })(
                <LanguageInput
                  name={nodeNameObj.remark || basicInfo.remark }
                  width={300}
                  inpRule={workflowUtil.getInpRule(100, this.props.languageList)}
                  i18nName={nodeNameObj.i18n || (basicInfo.i18n && nodeNameObj.i18n)}
                  isEdit
                  nameChange={this.handleRemarkChange}
                />
              )}
            </FormItem>
            <FormItem {...formItemLayout} label={messages('setting.key1373'/*节点类型*/)} colon={false}>
              {getFieldDecorator('approvalActions', {
                initialValue: basicInfo.approvalActions
              })(
                chosenNodeType === 1003 ?
                  <RadioGroup onChange={e => {this.setState({approvalAction: e.target.value})}}>
                    <Radio value="8001">
                      {messages('setting.key1374'/*通过*/)}
                      <span
                        className="approve-type-notice">{messages('setting.key1375'/*符合审批条件则系统自动审批通过,否则自动跳过到下一个节点*/)}</span>
                    </Radio>
                    <Radio value="8002">
                      {messages('setting.key1376'/*驳回*/)}
                      <span
                        className="approve-type-notice">{messages('setting.key1377'/*符合审批条件则系统自动审批驳回,否则自动跳过到下一个节点*/)}</span>
                    </Radio>
                  </RadioGroup> :
                  <div style={{color:'#aaa'}}>{messages('setting.key1737')/*满足审批条件，则系统自动产生信用付款，否则跳过。*/}</div>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label={messages('setting.key1378'/*审批意见*/)} colon={false}>
              {getFieldDecorator('comments', {
                rules: [{
                  max: 50,
                  message: messages('common.max.characters.length', {max: 50})
                }],
                initialValue: basicInfo.comments
              })(
                <TextArea placeholder={chosenNodeType === 1007 ? messages('setting.key1739')/*满足条件，系统自动产生信用付款*/:
                  (approvalAction === '8001' ? messages('setting.key1379'/*系统自动通过*/) :
                                        messages('setting.key1380'/*系统自动驳回*/))}
                          rows={2} style={{resize: 'none', width: 400}}/>
              )}
            </FormItem>
            <Button type="primary" htmlType="submit" loading={loading}>{messages('common.save')}</Button>
          </Form>
        </Card>
        <div className="add-btn-container">
          <Icon type="exclamation-circle-o" className="approve-info-icon"/>
          <span className="approve-info-text">{messages('setting.key1381'/*一个条件组内多条件为and关系, 不同条件组为or关系*/)}</span>
        </div>
      </div>
    )
  }
}

NodeApproveAi.propTypes = {
  basicInfo: React.PropTypes.object,
  basicInfoSaveHandle: React.PropTypes.func, //基本信息保存成功的回调
  chosenNodeType: React.PropTypes.number,
};

NodeApproveAi.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    languageList: state.login.languageList,
  }
}

const wrappedNodeApproveAi = Form.create()(NodeApproveAi);

export default connect(mapStateToProps)(wrappedNodeApproveAi)
